<template>
  <div>
    <el-card class="box-card margin_30">
      <div slot="header" class="clearfix">
        <el-button type="warning" size="mini" @click="openInitMenusDialog">初始化菜单</el-button>
        <el-button type="primary" size="mini" @click="addResources">新增菜单</el-button>
      </div>
      <el-table
        :data="list"
        style="width: 100%;height:100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-expand-all="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="title"
          label="菜单名称"
          width="150"
          fixed="left"
        />
        <el-table-column
          prop="icon"
          label="图标"
          width="150"
          align="center"
        >
          <template v-slot="scope">
            <i :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          align="center"
          label="等级"
        />
        <el-table-column
          prop="sort"
          align="center"
          label="排序"
        />
        <el-table-column
          prop="permissionValue"
          align="center"
          label="权限标识"
          width="150"
        />
        <el-table-column
          prop="path"
          align="center"
          label="路由"
          width="150"
        />
        <el-table-column
          prop="component"
          align="center"
          label="组件路径"
          width="280"
        />
        <el-table-column
          prop="status"
          align="center"
          label="是否可用"
        />
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          width="200"
        />
      </el-table>
    </el-card>
    <!-- 弹框出现 -->
    <el-dialog title="编辑菜单" :visible.sync="isShowDialog" width="50%" size="mini" @close="handleDialog">
      <el-form :model="formData" label-width="100px" size="mini">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="formData.type">
            <el-radio :label="0">顶级目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.type === 1" label="上级菜单">
          <el-cascader
            :options="menus"
            :props="{ checkStrictly: true, value:'id', label:'title' }"
            clearable
          />
        </el-form-item>
        <el-form-item v-if="formData.type === 2" label="所在页面">
          <el-cascader
            :options="menus"
            :props="{ checkStrictly: true, value:'id', label:'title' }"
            clearable
          />
        </el-form-item>
        <el-form-item v-if="formData.type === 2" label="按钮名称">
          <el-input v-model="formData.path" placeholder="按钮名称" size="small" clearable />
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="路由名称">
          <el-input v-model="formData.name" placeholder="" size="small" clearable />
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="路径">
          <el-input v-model="formData.path" placeholder="" size="small" clearable />
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="组件路径">
          <el-input v-model="formData.component" placeholder="" size="small" clearable />
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="重定向">
          <el-input v-model="formData.redirect" placeholder="" size="small" clearable />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="formData.sort" :min="0" :max="10" label="" />
        </el-form-item>
        <el-form-item v-if="formData.type === 1 || formData.type === 2" label="层级">
          <el-input-number v-model="formData.level" :min="0" :max="10" label="" />
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="是否隐藏">
          <el-radio v-model="formData.hidden" label="0">否</el-radio>
          <el-radio v-model="formData.hidden" label="1">是</el-radio>
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="是否展开">
          <el-radio v-model="formData.alwaysShow" label="0">否</el-radio>
          <el-radio v-model="formData.alwaysShow" label="1">是</el-radio>
        </el-form-item>
        <el-form-item v-if="formData.type === 0 || formData.type === 1" label="meta属性">
          <el-row>
            <el-col :span="12" :offset="0">
              <el-input v-model="meta.title" placeholder="123" size="small" clearable />
            </el-col>
            <el-col :span="12" :offset="0">
              <el-input v-model="meta.titleVal" placeholder="" size="small" clearable />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-input v-model="meta.icon" placeholder="" size="small" clearable />
            </el-col>
            <el-col :span="12" :offset="0">
              <el-input v-model="meta.iconVal" placeholder="" size="small" clearable />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item v-if="formData.type === 2" label="权限标识">
          <el-input v-model="formData.permissionValue" placeholder="" size="small" clearable />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleDialog">取 消</el-button>
        <el-button type="primary" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹框出现 -->
    <el-dialog title="编辑菜单" :visible.sync="isShowInitMenusDialog" width="40%" size="mini" @close="handleInitMenusDialog">
      <el-alert
        title="请谨慎操作! 初始化菜单会覆盖之前记录!"
        type="warning"
      />
      <el-tree :data="menus" :props="props" />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleInitMenusDialog">取 消</el-button>
        <el-button type="primary" size="small" @click="initMenus">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAllPermissions, saveInitMenus } from '@/api/auth/resources'
import _ from 'lodash'
export default {
  data() {
    return {
      loading: false,
      list: [],
      menus: [],
      props: {
        label: 'title'
      },
      meta: {
        title: 'title',
        titleVal: '未命名',
        icon: 'icon',
        iconVal: 'el-icon-menu'
      },
      formData: {
        'alwaysShow': false,
        'children': [],
        'component': '',
        'hidden': false,
        'icon': '',
        'id': '',
        'isSelect': false,
        'level': 0,
        'meta': '',
        'name': '',
        'path': '',
        'permissionValue': '',
        'pid': '',
        'redirect': '',
        'sort': 0,
        'status': 0,
        'title': '',
        'type': 0
      },
      isShowDialog: false,
      isShowInitMenusDialog: false
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    handleDialog() {
      this.isShowDialog = false
    },
    delChildren(arr) {
      arr.forEach(ele => {
        if (ele.children.length > 0) {
          this.delChildren(ele.children)
        } else {
          ele.disabled = true
          delete ele.children
        }
      })
    },
    // 新增资源弹框
    addResources() {
      this.isShowDialog = true
    },
    // 获取列表
    init() {
      this.loading = true
      findAllPermissions()
        .then(res => {
          console.log(res)
          this.list = res.data.menus
          var menus = _.cloneDeep(res.data.menus)
          this.delChildren(menus)
          this.menus = menus
        })
    },
    handleInitMenusDialog() {
      this.isShowInitMenusDialog = false
    },
    openInitMenusDialog() {
      this.isShowInitMenusDialog = true
    },
    initMenus() {
      saveInitMenus(this.menus)
        .then(res => {
          console.log(res)
          this.$message.success('保存成功！')
          this.isShowInitMenusDialog = false
          this.init
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
